<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
	<%@include file="/WEB-INF/views/common/header.jsp" %>
	<title>分类列表</title>
</head>
<body>
<%@include file="/WEB-INF/views/common/top.jsp" %>
<%@include file="/WEB-INF/views/common/nav.jsp" %>

<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
	<div class="show-top-grids">
		<div class="main-grids about-main-grids">
			<h4>商品列表</h4>
			<div class="recommended-info">
				<hr class="layui-bg-green">
				<form class="form-inline" class="layui-form layui-form-pane" method="post"
				      action='<c:url value="/category/list"/>'>
					<div class="row bs-example">
						<div class="form-group col-md-2">
							<input type="text" id="userName" name="userName" placeholder="商品名称" autocomplete="off"
							       value="" class="layui-input">
						</div>
					</div>


					<div class="row bs-example" style="margin-top: 1em;">
						<div class="form-group col-md-2">
							<%--<button class="layui-btn" id="query" type="submit">查询</button>--%>
							<button type="button" class="layui-btn layui-btn-primary" onclick="createCategory();">添加分类</button>
						</div>
					</div>


					<div class="about-grids" style="margin-top: 2em;">
						<table class="layui-table">
							<thead>
							<tr>
								<th style="width:10%;">商品名称</th>
								<th style="width:10%;">分类名称</th>
								<th style="width:10%">操作</th>
							</tr>
							</thead>
							<tbody>
							<c:forEach items="${response.data}" var="category" varStatus="status">
								<tr>
									<td>${category.id}</td>
									<td>${category.categoryName}</td>
									<td>
										<div class="layui-table-cell laytable-cell-1-9">
											<a onclick="deleteCategory(${category.id});"
											   class="layui-btn layui-btn-danger layui-btn-small">删除</a>
										</div>
									</td>
								</tr>
							</c:forEach>
							</tbody>
						</table>
					</div>
					<%--<div>--%>
						<%--<jsp:include page="/WEB-INF/views/common/pagination.jsp"/>--%>
					<%--</div>--%>
				</form>
			</div>
		</div>
	</div>
</div>

<div id="categoryContainer" style="display: none">
	<div class="col-sm-12">
		<div class="show-top-grids">
			<div class="main-grids about-main-grids">
				<div style="margin-top: 10px;" class="recommended-info">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">分类名称</label>
							<div class="layui-input-inline">
								<input type="text" name="categoryName" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

</body>

<script type="application/javascript">
	layui.use(['layer'], function () {
		window.layer = layui.layer;
	});

	/*导航栏参数*/
    var $nav_a = $("#ul_nav a[href='/category/list']");
	$nav_a.parent().addClass("active");
	$nav_a.parent().parent().css("display", "block");


	function createCategory() {
        var $temp = $("#categoryContainer");
        var addCategoryDialog = window.layer.open({
            type: 1
            , area: ['600px']
            , content: $temp
            , btn: ['添加']
            , title: "添加分类"
            , yes: function (index, layer) {
                var categoryName = $("input[name='categoryName']", $temp).val();

                if (categoryName === "") {
                    window.layer.msg("分类名称不能为空", {icon: 5, anim: 6});
                    return;
                }

                $.ajax({
                    url: '<c:url value="/category/create"/>',
                    dataType: 'json',
                    type: 'post',
                    data: {"categoryName":categoryName},
//                    contentType: "application/json",
                    error: function () {
                    },
                    success: function (data) {
                        if (data.code !== "200") {
                            window.layer.msg(data.message, {icon: 5, anim: 6});
                        } else {
                            window.layer.msg("创建成功！", {icon: 6, anim: 6});
                            window.location.href = '<c:url value="/category/list"/>'
                    }
                    }
                });

                window.layer.close(index);
            }
            , cancel: function (index, layero) {
                window.layer.close(index);
            }
        })
    }

    /**
	 * 删除分类
     * @param id
     */
    function deleteCategory(id) {
        window.layer.confirm('确定删除分类？', {btn: ['删除', '取消']}, function () {
            $.ajax({
                url: '<c:url value="/category/delete"/>',
                dataType: 'json',
                type: 'post',
                data: {id: id},
                success: function (data) {
                    if (data.code !== "200") {
                        window.layer.msg(data.message, {icon: 5, anim: 6});
                    } else {
                        window.layer.msg("删除成功！", {icon: 6, anim: 6});
                        window.location.href = '<c:url value="/category/list"/>'
                    }
                }, error: function () {

                }
            });
        });
    }

</script>


</html>
